<template>
	<view>
		<view class="box">
			<view class="titlebox">
				<view>{{info.key=='9h298ctj'?'后广场停车场':info.key=='1kebvqjq'?'地面停车场':'地库停车场'}}</view>
				<view>{{ info.carNo }}</view>
			</view>
			<view class="timebox">
				<view>{{ info.enterTime }}</view>
				<view>{{ info.outTime||'暂未出场'}}</view>
			</view>
			<image class="titimg" src="../../static/tit1.png"></image>
			<view class="wordone">
				<view>入场时间</view>
				<view>出场时间</view>
			</view>
			<view class="frombox">
				<view class="leftbox">订单号</view>
				<view class="rightbox">{{ info.orderNo }}</view>
			</view>
			<view class="frombox">
				<view class="leftbox">下单时间</view>
				<view class="rightbox">{{ dateFormat(info.createtime)}}</view>
			</view>
			<view class="frombox">
				<view class="leftbox">停车时长</view>
				<view class="rightbox" v-if="info">{{ info.outTime?getDuration(info.enterTime, info.outTime):'暂未出场' }}</view>
			</view>
			<!-- <view class="frombox">
				<view class="leftbox">续费时长</view>
				<view class="rightbox">2小时</view>
			</view> -->
			<view class="frombox">
				<view class="leftbox">优惠额度</view>
				<view class="rightbox">无</view>
			</view>
			<view class="frombox">
				<view class="leftbox">应付金额</view>
				<view class="rightbox">￥{{ info.totalAmount }}</view>
			</view>
			<view class="frombox">
				<view class="leftbox">支付方式</view>
				<view class="rightbox">微信支付</view>
			</view>
			<view class="frombox">
				<view class="leftbox">实付金额</view>
				<view class="rightbox">￥{{ info.totalAmount }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			info: null
		}
	},
	onLoad(option) {
		this.info =  JSON.parse(decodeURIComponent(option.info))//(option.scene)createtime
		console.log(this.info)
	},
	methods: {
		getDuration(stime, etime) {
			let seconds = Math.abs((Date.parse(etime) - Date.parse(stime)) / 1000)
			let hour = Math.floor(seconds / 3600)
			let minute = Math.floor((seconds % 3600) / 60)
			let second = Math.floor((seconds % 3600) % 60)
			return `${hour < 10 ? '0' + hour : hour}小时 ${minute < 10 ? '0' + minute : minute}分 ${second < 10 ? '0' + second : second}秒`
		},
		 dateFormat: function(value) {           
		                var date = new Date(value*1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
		                var year = date.getFullYear();
		                var month = ("0" + (date.getMonth() + 1)).slice(-2);
		                var sdate = ("0" + date.getDate()).slice(-2);
		                var hour = ("0" + date.getHours()).slice(-2);
		                var minute = ("0" + date.getMinutes()).slice(-2);
		                var second = ("0" + date.getSeconds()).slice(-2);
		                // 拼接
		                var result = year + "年" + month + "月" + sdate + "日 " + hour + ":" + minute //+ ":" + second;
		                // 返回
		                return result;
		            },
	}
}
</script>

<style lang="scss" scoped>
.box {
	width: 650rpx;
	// height: 926rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 0 20rpx;
	margin: 0 auto;
	text-align: center;

	.titimg {
		width: 530rpx;
		height: 28rpx;
	}

	.titlebox {
		height: 108rpx;
		align-items: center;
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #222222;
	}

	.timebox {
		height: 60rpx;
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #222222;
	}

	.wordone {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #555555;
		height: 80rpx;
		border-bottom: solid #F1F1F1 2rpx;
	}

	.frombox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;

		.leftbox {
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #666666;
		}
	}
}</style>
